<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切片练习</title>
    <script>
        window.onload=function () {
            var img=document.getElementById("img");
            var imgArr=["../imagconman/1.jpg","../imagconman/2.jpg","../imagconman/3.jpg","../imagconman/4.jpg","../imagconman/5.jpg"];
            var index=0;
            var timer;
            var btn01=document.getElementById("btn01");
            var btn02=document.getElementById("btn02");
            btn01.onclick=function () {
                clearInterval(timer);//开启定时器之前需要将当前元素上的其他定时器关了
                timer=setInterval(function(){//设置定时器
                    index++;
                    if (index>=imgArr.length){
                        index=0;
                    }
                    img.src=imgArr[index];
                },1000);
            };
            btn02.onclick=function () {
                clearInterval(timer);//关闭定时器
            }

        };
    </script>
</head>
<body>
<img src="../imagconman/1.jpg" alt="" id="img">
<br /><br />
<button id="btn01">start</button>
<button id="btn02">stop</button>
</body>
</html>